<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="">

	<title>豆瓣电影数据分析</title>
    {% load static %}

	<!-- Main Styles -->
	<link rel="stylesheet" href="/static/assets/styles/style.min.css">

	<!-- Material Design Icon -->
	<link rel="stylesheet" href="/static/assets/fonts/material-design/css/materialdesignicons.css">

	<!-- mCustomScrollbar -->
	<link rel="stylesheet" href="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">

	<!-- Waves Effect -->
	<link rel="stylesheet" href="/static/assets/plugin/waves/waves.min.css">

	<!-- Sweet Alert -->
	<link rel="stylesheet" href="/static/assets/plugin/sweet-alert/sweetalert.css">

	<!-- Morris Chart -->
	<link rel="stylesheet" href="/static/assets/plugin/chart/morris/morris.css">

	<!-- FullCalendar -->
	<link rel="stylesheet" href="/static/assets/plugin/fullcalendar/fullcalendar.min.css">
	<link rel="stylesheet" href="/static/assets/plugin/fullcalendar/fullcalendar.print.css" media='print'>

	<!-- Dark Themes -->
	<link rel="stylesheet" href="/static/assets/styles/style-black.min.css">
</head>

<body>
<div class="main-menu">
	<header class="header">
		<a href="index.html" class="logo"><i class="ico mdi mdi-cube-outline"></i>豆瓣电影数据分析</a>
		<button type="button" class="button-close fa fa-times js__menu_close"></button>
		<div class="user">
			<a href="#" class="avatar"><img src="/media/{% if userInfo.avatar %}{{ userInfo.avatar }}{% else %}default.jpg{% endif %}" alt=""><span class="status online"></span></a>
			<h5 class="name"><a href="profile.html">{{ userInfo.username }}</a></h5>
			<h5 class="position">{{ userInfo.info }}</h5>
			<!-- /.name -->
			<div class="control-wrap js__drop_down">
				<i class="fa fa-caret-down js__drop_down_button"></i>
				<div class="control-list">
					<div class="control-item"><a href="profile.html"><i class="fa fa-user"></i> 个人信息</a></div>
					{# <div class="control-item"><a href="#"><i class="fa fa-gear"></i> Settings</a></div>#}
					<div class="control-item"><a href="/myApp/logout/"><i class="fa fa-sign-out"></i> 退出登录</a></div>
				</div>
				<!-- /.control-list -->
			</div>
			<!-- /.control-wrap -->
		</div>
		<!-- /.user -->
	</header>
	<!-- /.header -->
	<div class="content">

		<div class="navigation">
			<h5 class="title">导航栏</h5>
			<!-- /.title -->
			<ul class="menu js__accordion">
				<li class="current">
					<a class="waves-effect" href="/myApp/home/"><i class="menu-icon mdi mdi-view-dashboard"></i><span>首页</span></a>
				</li>
				<li>
					<a class="waves-effect parent-item js__control" href="#"><i class="menu-icon mdi mdi-desktop-mac"></i><span>个人中心</span><span class="menu-arrow fa fa-angle-down"></span></a>
					<ul class="sub-menu js__content">
						<li><a href="/myApp/userInfo/">个人信息管理</a></li>
						<li><a href="/myApp/changePassword/">修改密码</a></li>
					</ul>
					<!-- /.sub-menu js__content -->
				</li>

			</ul>
			<!-- /.menu js__accordion -->
{#			<h5 class="title">Extra</h5>#}
			<!-- /.title -->
			<ul class="menu js__accordion">
				<li>
					<a class="waves-effect parent-item js__control" href="#"><i class="menu-icon mdi mdi-pencil-box"></i><span>数据表格</span><span class="menu-arrow fa fa-angle-down"></span></a>
					<ul class="sub-menu js__content">
						<li><a href="/myApp/tableData/">电影数据</a></li>
						<li><a href="/myApp/search/">搜索</a></li>
					</ul>
					<!-- /.sub-menu js__content -->
				</li>
				<li>
					<a class="waves-effect parent-item js__control" href="#"><i class="menu-icon mdi mdi-chart-areaspline"></i><span>可视化图表</span><span class="notice notice-blue">4</span></a>
					<ul class="sub-menu js__content">
						<li><a href="/myApp/typeChart/">种类分析</a></li>
						<li><a href="/myApp/countryChart/">国家分析</a></li>
						<li><a href="/myApp/timeChart/">时间分析</a></li>
						<li><a href="/myApp/commentChart/">评论分析</a></li>
					</ul>
					<!-- /.sub-menu js__content -->
				</li>
				<li>
					<a class="waves-effect parent-item js__control" href="#"><i class="menu-icon mdi mdi-file-word"></i><span>词云图</span><span class="menu-arrow fa fa-angle-down"></span></a>
					<ul class="sub-menu js__content">
						<li><a href="/myApp/titleCloud/">标题词云图</a></li>
						<li><a href="/myApp/summaryCloud/">简介词云图</a></li>
					</ul>
					<!-- /.sub-menu js__content -->
				</li>

			</ul>
			<!-- /.menu js__accordion -->
		</div>
		<!-- /.navigation -->
	</div>
	<!-- /.content -->
</div>
<!-- /.main-menu -->

<div class="fixed-navbar">
	<div class="pull-left">
		<button type="button" class="menu-mobile-button glyphicon glyphicon-menu-hamburger js__menu_mobile"></button>
		<h1 class="page-title">Home</h1>
		<!-- /.page-title -->
	</div>
	<!-- /.pull-left -->
	<div class="pull-right">
		<div class="ico-item">
			<a href="#" class="ico-item mdi mdi-magnify js__toggle_open" data-target="#searchform-header"></a>
			<form action="/myApp/search/" method="POST" id="searchform-header" class="searchform js__toggle" >
                <input name="searchWord" type="search" placeholder="搜索电影" class="input-search">
                <button class="mdi mdi-magnify button-search" type="submit"></button></form>
			<!-- /.searchform -->
		</div>
		<!-- /.ico-item -->
		{#  <a href="#" class="ico-item mdi mdi-email notice-alarm js__toggle_open" data-target="#message-popup"></a> #}
		{#  <a href="#" class="ico-item pulse"><span class="ico-item mdi mdi-bell notice-alarm js__toggle_open" data-target="#notification-popup"></span></a> #}
		<a href="#" class="ico-item mdi mdi-logout js__logout"></a>
	</div>
	<!-- /.pull-right -->
</div>
<!-- /.fixed-navbar -->

<div id="notification-popup" class="notice-popup js__toggle" data-space="75">
	<h2 class="popup-title">Your Notifications</h2>
	<!-- /.popup-title -->
	<div class="content">
		<ul class="notice-list">
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
					<span class="name">John Doe</span>
					<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
					<span class="time">10 min</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-sm-2.jpg" alt=""></span>
					<span class="name">Anna William</span>
					<span class="desc">Like your post: “Facebook Messenger”</span>
					<span class="time">15 min</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar bg-warning"><i class="fa fa-warning"></i></span>
					<span class="name">Update Status</span>
					<span class="desc">Failed to get available update data. To ensure the please contact us.</span>
					<span class="time">30 min</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
					<span class="name">Jennifer</span>
					<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
					<span class="time">45 min</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-sm-6.jpg" alt=""></span>
					<span class="name">Michael Zenaty</span>
					<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
					<span class="time">50 min</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
					<span class="name">Simon</span>
					<span class="desc">Like your post: “Facebook Messenger”</span>
					<span class="time">1 hour</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar bg-violet"><i class="fa fa-flag"></i></span>
					<span class="name">Account Contact Change</span>
					<span class="desc">A contact detail associated with your account has been changed.</span>
					<span class="time">2 hours</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-sm-7.jpg" alt=""></span>
					<span class="name">Helen 987</span>
					<span class="desc">Like your post: “Facebook Messenger”</span>
					<span class="time">Yesterday</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
					<span class="name">Denise Jenny</span>
					<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
					<span class="time">Oct, 28</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-sm-8.jpg" alt=""></span>
					<span class="name">Thomas William</span>
					<span class="desc">Like your post: “Facebook Messenger”</span>
					<span class="time">Oct, 27</span>
				</a>
			</li>
		</ul>
		<!-- /.notice-list -->
		<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
	</div>
	<!-- /.content -->
</div>
<!-- /#notification-popup -->

<div id="message-popup" class="notice-popup js__toggle" data-space="75">
	<h2 class="popup-title">Recent Messages<a href="#" class="pull-right text-danger">New message</a></h2>
	<!-- /.popup-title -->
	<div class="content">
		<ul class="notice-list">
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
					<span class="name">John Doe</span>
					<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
					<span class="time">10 min</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-sm-3.jpg" alt=""></span>
					<span class="name">Harry Halen</span>
					<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
					<span class="time">15 min</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
					<span class="name">Thomas Taylor</span>
					<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
					<span class="time">30 min</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
					<span class="name">Jennifer</span>
					<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
					<span class="time">45 min</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-sm-5.jpg" alt=""></span>
					<span class="name">Helen Candy</span>
					<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
					<span class="time">45 min</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
					<span class="name">Anna Cavan</span>
					<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
					<span class="time">1 hour ago</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar bg-success"><i class="fa fa-user"></i></span>
					<span class="name">Jenny Betty</span>
					<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
					<span class="time">1 day ago</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-5.jpg" alt=""></span>
					<span class="name">Denise Peterson</span>
					<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
					<span class="time">1 year ago</span>
				</a>
			</li>
		</ul>
		<!-- /.notice-list -->
		<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
	</div>
	<!-- /.content -->
</div>
<!-- /#message-popup -->
<div id="wrapper">
	<div class="main-content">
		<div class="row small-spacing">
			<div class="col-xs-12">
				<div class="box-content">
					<h4 class="box-title">Activity</h4>
					<!-- /.box-title -->
                    <div class="row align-items-center">
                         <div class="col-4 col-sm-3 col-xl-2" style="text-align: center">
                             <img src="/static/assets/images/icon-email.png" class="gradient-corona-img img-fluid" alt="">
                         </div>
                         <div class="col-5 col-sm-7 col-xl-8 p-0">
                            <h4 class="mb-1 mb-sm-0">豆瓣电影数据分析可视化系统</h4>
                            <p class="mb-0 font-weight-normal d-none d-sm-block">数据采集电影名，评分，封面图，详情url，上映时间，类型，制作国家，语言，片长，电影简介，星星比例，多少人评价，预告，前五条评论，五张详情图片。</p>
                         </div>
                    </div>
					<!-- /#flot-chart-1.flot-chart -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-xs-12 -->

			<div class="col-lg-4 col-xs-12">
				<div class="box-content">
					<h4 class="box-title text-info">豆瓣最高评分</h4>
					<!-- /.box-title -->
					<!-- /.dropdown js__dropdown -->
					<div class="content widget-stat">
						<div id="traffic-sparkline-chart-1" class="left-content margin-top-15"></div>
						<!-- /#traffic-sparkline-chart-1 -->
						<div class="right-content">
							<h2 class="counter text-info">{{maxRate}}分</h2>
							<!-- /.counter -->
{#							<p class="text text-info">Some text here</p>#}
							<!-- /.text -->
						</div>
						<!-- .right-content -->
					</div>
					<!-- /.content widget-stat -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-4 col-xs-12 -->

			<div class="col-lg-4 col-xs-12">
				<div class="box-content">
					<h4 class="box-title text-success">评论个数</h4>
					<!-- /.box-title -->
					<!-- /.dropdown js__dropdown -->
					<div class="content widget-stat">
						<div id="traffic-sparkline-chart-2" class="left-content margin-top-10"></div>
						<!-- /#traffic-sparkline-chart-2 -->
						<div class="right-content">
							<h2 class="counter text-success">{{maxCommentlen}}个</h2>
							<!-- /.counter -->
{#							<p class="text text-success">Some text here</p>#}
							<!-- /.text -->
						</div>
						<!-- .right-content -->
					</div>
					<!-- /.content widget-stat -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-4 col-xs-12 -->

			<div class="col-lg-4 col-xs-12">
				<div class="box-content">
					<h4 class="box-title text-success">最长放映时间</h4>
					<!-- /.box-title -->
					<!-- /.dropdown js__dropdown -->
					<div class="content widget-stat">
						<div id="traffic-sparkline-chart-3" class="left-content"></div>
						<!-- /#traffic-sparkline-chart-3 -->
						<div class="right-content">
							<h2 class="counter text-danger">{{maxMovieTime}}分钟</h2>
							<!-- /.counter -->
{#							<p class="text text-danger">Some text here</p>#}
							<!-- /.text -->
						</div>
						<!-- .right-content -->
					</div>
					<!-- /.content widget-stat -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-4 col-xs-12 -->

			<div class="col-lg-8 col-xs-12">
				<div class="box-content">
					<h4 class="box-title">评分统计图</h4>
					<!-- /.box-title -->
					<!-- /.dropdown js__dropdown -->
                    <div style="height: 450px;width: 100%" id="mainOne"></div>
{#					<div id="bar-morris-chart" class="morris-chart" style="height: 240px"></div>#}
{#					<div class="text-center">#}
{#						<ul class="list-inline morris-chart-detail-list">#}
{#							<li><i class="fa fa-circle"></i>Series A</li>#}
{#							<li><i class="fa fa-circle"></i>Series B</li>#}
{#							<li><i class="fa fa-circle"></i>Series C</li>#}
{#						</ul>#}
{#					</div>#}
					<!-- /#bar-morris-chart.morris-chart -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-6 col-xs-12 -->

			<div class="col-lg-4 col-xs-12">
				<div class="box-content">
					<h4 class="box-title">用户统计图</h4>
					<!-- /.box-title -->
					<!-- /.dropdown js__dropdown -->
                    <div id="main" style="height: 450px;width: 100%"></div>
					<!-- /#donut-morris-chart.morris-chart -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-6 col-xs-12 -->
		</div>
		<!-- /.row -->

		<div class="row small-spacing">
			<div class="col-lg-3 col-md-6 col-xs-12">
				<div class="box-content bg-success text-white">
					<div class="statistics-box with-icon">
						<i class="ico small fa fa-diamond"></i>
						<p class="text text-white">评分最高电影</p>
						<h4 class="counter">{{ maxTitle }}</h4>
					</div>
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-3 col-md-6 col-xs-12 -->
			<div class="col-lg-3 col-md-6 col-xs-12">
				<div class="box-content bg-info text-white">
					<div class="statistics-box with-icon">
						<i class="ico small fa fa-upload"></i>
						<p class="text text-white">最新上映时间</p>
						<h4 class="counter">{{ minTime }}</h4>
					</div>
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-3 col-md-6 col-xs-12 -->
			<div class="col-lg-3 col-md-6 col-xs-12">
				<div class="box-content bg-danger text-white">
					<div class="statistics-box with-icon">
						<i class="ico small fa fa-tag"></i>
						<p class="text text-white">电影种类个数</p>
						<h2 class="counter">{{ maxTypelen }}</h2>
					</div>
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-3 col-md-6 col-xs-12 -->
			<div class="col-lg-3 col-md-6 col-xs-12">
				<div class="box-content bg-warning text-white">
					<div class="statistics-box with-icon">
						<i class="ico small fa fa-file-movie-o"></i>
						<p class="text text-white">最多电影种类</p>
						<h2 class="counter">{{maxType}}</h2>
					</div>
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-3 col-md-6 col-xs-12 -->
		</div>
		<!-- .row -->
        <div class="row small-spacing">
			<!-- /.col-xs-12 -->

			<div class="col-lg-12 col-xs-12">
				<div class="box-content">
					<h4 class="box-title">电影选择</h4>
					<!-- /.box-title -->
					<!-- /.dropdown js__dropdown -->
					<select onchange="movieChange(event)" name="" id="" class="form-control">
                        {% for i in movieList %}
                        <option value="{{ i }}">{{ i }}</option>
                        {% endfor %}
                    </select>
					<!-- /.content widget-stat -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-4 col-xs-12 -->

			<!-- /.col-lg-4 col-xs-12 -->
			<!-- /.col-lg-6 col-xs-12 -->
		</div>
        <div class="row small-spacing">
			<!-- /.col-xs-12 -->

			<div class="col-lg-4 col-xs-12">
				<div class="box-content">
					<h4 class="box-title">电影评论</h4>
					<!-- /.box-title -->
					<!-- /.dropdown js__dropdown -->
                    <div class="preview">
                        {% for i in movieInfo.comments %}
                            <div>
                              <h6 class="preview-subject" style="display:flex;align-items:center;width:100%">
                                  <div style="margin-right:10px">
                                       {{ i.user }}
                                  </div>
                              {% if i.start == '10' %}
                              <i class="ico mdi mdi-heart"></i>
                              {% elif i.start == '20' %}
                              <i class="ico mdi mdi-heart"></i>
                              <i class="ico mdi mdi-heart"></i>
                              {% elif i.start == '30' %}
                              <i class="ico mdi mdi-heart"></i>
                              <i class="ico mdi mdi-heart"></i>
                              <i class="ico mdi mdi-heart"></i>
                              {% elif i.start == '40' %}
                              <i class="ico mdi mdi-heart"></i>
                              <i class="ico mdi mdi-heart"></i>
                              <i class="ico mdi mdi-heart"></i>
                              <i class="ico mdi mdi-heart"></i>
                              {% elif i.start == '50' %}
                              <i class="ico mdi mdi-heart"></i>
                              <i class="ico mdi mdi-heart"></i>
                              <i class="ico mdi mdi-heart"></i>
                              <i class="ico mdi mdi-heart"></i>
                              <i class="ico mdi mdi-heart"></i>
                       {% endif %}
               <p class="text-muted text-small" style="margin-left:auto">{{ i.time }}</p>
               </h6>
        <p class="text-muted"
           style="width:100%;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 3;
                  overflow: hidden;">
            {{ i.comments }}
        </p>
    </div>
                        {% endfor %}
                    </div>
					<!-- /.content widget-stat -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-4 col-xs-12 -->

			<div class="col-lg-4 col-xs-12">
				<div class="box-content">
					<h4 class="box-title">图片展示</h4>
					<!-- /.box-title -->
					<!-- /.dropdown js__dropdown -->
					<div style="display: flex;flex-wrap: wrap;justify-content: space-between">
                        {% for i in movieInfo.imglist %}
                            <div class="item" style="flex-basis: 0;flex: 1;text-align: center">
                                 <img src="{{ i }}" alt="" style="border-radius: 10px;margin-bottom: 10px">
                            </div>
                        {% endfor %}
                    </div>
                <div class="d-flex py-4">
                      <div>
                        <div>
                           <img src="{{ movieInfo.cover }}" style="object-fit: cover" class="rounded-circle" alt="">
                        </div>
                        <div>
                          <div>
                            <h6>{{ movieInfo.title }}</h6>
                            <p class="text-muted text-small">{{ movieInfo.uptime }}</p>
                          </div>
                          <p class="text-muted" style="line-height:1.6;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;">{{movieInfo.summary}}</p>
                        </div>
                      </div>
                </div>
					<!-- /.content widget-stat -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-4 col-xs-12 -->

			<div class="col-lg-4 col-xs-12">
				<div class="box-content">
					<h4 class="box-title">影评等级</h4>
					<div class="list-wrapper">
            <style>
                .list-item{
                    margin-bottom: 70px;
                }
            </style>
            <div class="list-item">
                <h6>五星占比</h6>
                <div class="progress">
                    <div class="progress-bar process-bar-striped "
                         role="progressbar"
                         aria-valuenow="75"
                         aria-valuemin="0"
                         aria-valuemax="100"
                         style="width: {{ movieInfo.starts.0 }}">
                    </div>
                </div>
            </div>
                        <div class="list-item">
                <h6>四星占比</h6>
                <div class="progress">
                    <div class="progress-bar process-bar-striped bg-success"
                         role="progressbar"
                         aria-valuenow="75"
                         aria-valuemin="0"
                         aria-valuemax="100"
                         style="width: {{ movieInfo.starts.1 }}">
                    </div>
                </div>
            </div>
                        <div class="list-item">
                <h6>三星占比</h6>
                <div class="progress">
                    <div class="progress-bar process-bar-striped bg-info"
                         role="progressbar"
                         aria-valuenow="75"
                         aria-valuemin="0"
                         aria-valuemax="100"
                         style="width: {{ movieInfo.starts.2 }}">
                    </div>
                </div>
            </div>
                        <div class="list-item">
                <h6>二星占比</h6>
                <div class="progress">
                    <div class="progress-bar process-bar-striped bg-warning"
                         role="progressbar"
                         aria-valuenow="75"
                         aria-valuemin="0"
                         aria-valuemax="100"
                         style="width: {{ movieInfo.starts.3 }}">
                    </div>
                </div>
            </div>
                        <div class="list-item">
                <h6>一星占比</h6>
                <div class="progress">
                    <div class="progress-bar process-bar-striped bg-danger"
                         role="progressbar"
                         aria-valuenow="75"
                         aria-valuemin="0"
                         aria-valuemax="100"
                         style="width: {{ movieInfo.starts.4 }}">
                    </div>
                </div>
            </div>
        </div>
					<!-- /.content widget-stat -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-4 col-xs-12 -->
			<!-- /.col-lg-6 col-xs-12 -->
		</div>
		<!-- /.row -->

	</div>
	<!-- /.main-content -->
</div><!--/#wrapper -->
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="/static/assets/script/html5shiv.min.js"></script>
		<script src="/static/assets/script/respond.min.js"></script>
	<![endif]-->
	<!--
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="/static/assets/scripts/jquery.min.js"></script>
	<script src="/static/assets/scripts/modernizr.min.js"></script>
	<script src="/static/assets/plugin/bootstrap/js/bootstrap.min.js"></script>
	<script src="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
	<script src="/static/assets/plugin/nprogress/nprogress.js"></script>
	<script src="/static/assets/plugin/sweet-alert/sweetalert.min.js"></script>
	<script src="/static/assets/plugin/waves/waves.min.js"></script>

	<!-- Morris Chart -->
	<script src="/static/assets/plugin/chart/morris/morris.min.js"></script>
	<script src="/static/assets/plugin/chart/morris/raphael-min.js"></script>
	<script src="/static/assets/scripts/chart.morris.black.init.min.js"></script>

	<!-- Flot Chart -->
	<script src="/static/assets/plugin/chart/plot/jquery.flot.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.tooltip.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.categories.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.pie.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.stack.min.js"></script>
	<script src="/static/assets/scripts/chart.flot.black.init.min.js"></script>

	<!-- Sparkline Chart -->
	<script src="/static/assets/plugin/chart/sparkline/jquery.sparkline.min.js"></script>
	<script src="/static/assets/scripts/chart.sparkline.init.min.js"></script>

	<!-- FullCalendar -->
	<script src="/static/assets/plugin/moment/moment.js"></script>
	<script src="/static/assets/plugin/fullcalendar/fullcalendar.min.js"></script>
	<script src="/static/assets/scripts/fullcalendar.init.js"></script>

	<script src="/static/assets/scripts/main.js"></script>
    <script src="/static/js/echarts.min.js"></script>

    <script>
        var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center',
      textStyle:{
        color:'grey'
      }
  },
  series: [
    {
      name: '用户',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: {{ userPieData | safe }}
    }
  ]
};

option && myChart.setOption(option);
    </script>
    <script>
        var chartDom = document.getElementById('mainOne');
        let xData={{ xData }}
        let yData={{ yData }}
        let xRes=[]
        let yRes=[]
        for (var i=0;i<8;i++){
            xRes.push(xData[i])
        }
        for (var i=0;i<8;i++){
            yRes.push(yData[i])
        }
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: 'category',
    data: xRes
  },
    tooltip: {
      trigger: 'axis'
    },
    legend:{
      data:['评分'],
        textStyle: {color: '#ffffff'}},
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: yRes,
      type: 'bar',
        name:'评分',
        markPoint:{
          data:[
              {type:'max',name: 'Max'},
              {type: 'min',name: 'Min'}
          ]},
        markLine:{
          data:[{type:'average',name:'Avg'}]}
    }
  ]
};
let count=8;
setInterval(function (){
    if (count>=xData.length){count=0}
    xRes.shift()
    xRes.push(xData[count])
    yRes.shift()
    yRes.push(yData[count])
    count++
    option = {
  xAxis: {
    type: 'category',
    data: xRes
  },
    tooltip: {
      trigger: 'axis'
    },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: yRes,
      type: 'bar'
    }
  ]
};
    option && myChart.setOption(option);
},2000)

option && myChart.setOption(option);
    </script>
<script>
    function movieChange(e){
        location.href='http://127.0.0.1:8000/myApp/home?movieName='+e.target.value
    }
</script>

</body>
</html>